<template>
  <div class="params">
    <!-- 1、目录位置 面包屑 -->
    <ElementUIBreadcrumb />
    <!-- 2、搜索框 -->
    <div class="header">
      <el-input v-model="input" @change="searchInp"  placeholder='请输入类目的ID' ></el-input>
      <el-button type="primary"  >搜索</el-button>
      <el-button type="primary" @click="showParams">添加</el-button>
    </div>
    <!-- 3、表格 -->
    <el-table class="my-table" :data="tableData" border style="width: 100%">
      <el-table-column prop="itemCatId" label="规格参数ID" width="100">
      </el-table-column>
      <el-table-column prop="id" label="类目的ID" width="120">
      </el-table-column>
      <el-table-column prop="specsName" label="规格名称" width="120">
      </el-table-column>
      <el-table-column prop="paramData" label="规格参数" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="" label="操作" width="100">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="primary">搜索</el-button> -->
          <!-- scope.$index, scope.row 当前下表和行的数据   -->
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 4、分页 -->
    <MypaginationIndex
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @handleCurrentChange="handleCurrentChange"
    ></MypaginationIndex>
    <!-- 5、弹框   ref 类似于给他添加一个自定义事件   然后在再按钮添加一个自定义事件showParams  this.$refs.dialog.dialogVisible = true  父子组件通讯类似-->
    <ParamsDialog ref="dialog"></ParamsDialog>
  </div>
</template>

<script>
import MypaginationIndex from "../../../components/MypaginationIndex.vue";
import ParamsDialog from "./ParamsDialog.vue"
export default {
  components: { MypaginationIndex,ParamsDialog },
  data() {
    return {
      input: "",
      tableData: [],
      total: 10,
      pageSize: 1,
      currentPage: 1,
    };
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //请求后端接口
        this.$api.getdeleteParams({id: row.id}).then((res) => {
          console.log('删除', res.data);
          if(res.data.status === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            // 视图更新
            this.http(1);
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    //点击显示弹框--配置规格参数 自定义事件
    showParams(){
    this.$refs.dialog.dialogVisible = true
    },
    //规格参数搜索查询
    searchInp(val){
      console.log('------触发规格参数搜索',val);
      this.$api.getsearchparams({search:val})
        .then(res => {
          console.log('-----------获取到后端规格参数查询的接口', res.data);
          if(res.data.status === 200){
            this.tableData = res.data.result;
          } else {
            this.tableData = [];
          }
        })
        .catch(error => {
          console.error('规格参数搜索请求出错:', error);
        });
    },
    handleCurrentChange(num) {
      this.currentPage = num;
      this.http(num);
    },
    http(page) {
      this.$api.getParams({ page })
        .then(res => {
          console.log("===== 规格参数接口返回数据 =====", res.data);
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
        })
        .catch(error => {
          console.error('规格参数分页请求出错:', error);
        });
    }
  },
  created() {
    this.http(1);
  },
};
</script>

<style lang="less" scoped>
.params {
  margin: 20px;
}
.header {
  background: #fff; //颜色
  padding: 10px; //
  display: flex; //变成弹性盒子，在同一行 不
  border: 1px solid #eee;
  button {
    margin-left: 20px; //输入框 最右侧向左移动20px
  }
}
.my-table {
  margin: 0 auto;
}
</style>